<!--  -->
<template>
    <div class='tableMain'>
        <div v-if="SelType != 'select'" class="common-seach-wrap"
            style="display: flex;justify-content: space-between;align-items: center;">
            <el-input placeholder="请输入模版名称" clearable @keyup.enter.native="onSubmit" v-model="searchForm.templateName"
                style="width:30%;">
                <template #append>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </template>
            </el-input>
            <el-button type="primary" style="margin:10px 0px" @click="onAdd">新增</el-button>
        </div>
        <el-table :data="tableData" border v-loading="loading" size="small" style="width: 100%" stripe>
            <el-table-column label="序号" type="index" fixed width="50">
            </el-table-column>
            <el-table-column prop="templateName" label="模版名称" width="150" />
            <el-table-column prop="templateText" label="模版内容" min-width="180">
                <template #default="scope">
                    <div v-html="scope.row.templateText"></div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="150"></el-table-column>
            <el-table-column prop="control" label="操作" width="130">
                <template #default="scope">
                    <el-button v-if="SelType != 'select'" size="small" type="primary" @click="handlerChange(scope.row)" icon="Edit">编辑</el-button>
                    <el-button v-if="SelType != 'select'" @click="deleteClick(scope.row)" type="danger" size="small" icon="Delete">删除</el-button>
                    <el-button v-if="SelType == 'select'" size="small" type="primary" @click="SelChange(scope.row)" icon="CircleCheck">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination background @current-change="handlerCurrentChange" :page-sizes="[2, 10, 20, 50, 100]" :page-size="10" :current-page="searchForm.pageIndex" layout="total, prev, pager, next, jumper" :total="totalCount"></el-pagination>
        </div>

        <!-- 会员等级调整 -->
        <el-dialog v-model="levelShow" :title="templateNameAddEdit" width="60%" :show-close="false" :close-on-click-modal="false">
            <el-form v-if="levelShow" ref="levelForm" :model="levelForm">
                <el-form-item label="模版名称：">
                    <el-input style="width: 93%;" v-model="levelForm.templateName" />
                </el-form-item>
                <el-form-item label="模版内容：">
                    <div class="edit_container">
                        <Uediter :text="levelForm.templateText" :config="ueditor.config" editorid="editor-demo-template"
                            ref="editorDemoTemplate" @contentChange="contentChangeFunc">
                        </Uediter>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="levelCancle" icon="Close">关闭</el-button>
                    <el-button type="primary" @click="levelSave" v-loading="btnloading" icon="CircleCheck">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import Uediter from "@/components/UE.vue";
import SettingApi from "@/api/setting.js";
import { ElMessage } from 'element-plus'
import { defaultPageSize } from '@/utils/table.js'

export default {
    name: '',
    components: { Uediter },
    props: {
        SelType: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            totalCount: 0,
            disabled: false,
            /*富文本框配置*/
            ueditor: {
                text: "",
                config: {
                    minFrameWidth: 700,
                    initialFrameHeight: 300,
                },
            },
            templateNameAddEdit: '新增模版',
            tableData: [],
            searchForm: {
                isMember: true,
                nickName: '',
                pageIndex: 1,
                pageSize: defaultPageSize
            },
            exportShow: false,
            levelShow: false,
            fileList: [],
            levelForm: {
                templateName: '',
                templateText: '',
                templateId: '',
            },
            levelOptions: [],
            btnloading: false,
            importLoading: false
        };
    },
    computed: {},
    methods: {
        /*获取富文本内容*/
        contentChangeFunc(e) {
            this.levelForm.templateText = e;
        },
        loadTableData() {
            this.loading = true
            const $this = this
            SettingApi.templateIndex($this.searchForm)
                .then(result => {
                    $this.loading = false
                    const { code, data } = result
                    if (code === 1) {
                        const { total, records } = data
                        $this.totalCount = total
                        $this.tableData = records
                    }
                    console.log('rsult'.result)
                })
        },
        handlerCurrentChange(current) {
            this.searchForm.pageIndex = current
            this.loadTableData(this.tabType)
        },
        onSubmit() {
            this.loadTableData()
        },
        SelChange(row) {
            this.$emit('SelChange', row)
        },
        onAdd() {
            this.templateNameAddEdit = '新增模版'
            this.levelShow = true
            this.levelForm = {
                templateName: '',
                templateText: '',
                templateId: '',
            }
            this.levelForm = JSON.parse(JSON.stringify(this.levelForm))
        },
        /*删除*/
        deleteClick(row) {
            let self = this;
            ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    SettingApi.templateDelete({ templateId: row.templateId }, true)
                        .then((data) => {
                            ElMessage({
                                message: "删除成功",
                                type: "success",
                            });
                            self.loadTableData();
                        })
                        .catch((error) => { });
                })
                .catch(() => { });
        },
        handlerChange(row) {
            this.templateNameAddEdit = '编辑模版'
            this.levelForm = row;
            this.levelShow = true
            console.log('row', row)
        },
        levelCancle() {
            this.levelShow = false
        },
        levelSave() {
            const $this = this
            const postJson = $this.levelForm
            this.$refs['levelForm'].validate((valid) => {
                if (valid) {
                    let URL = null;
                    if (this.levelForm.templateId) {
                        URL = SettingApi.templateUpdate
                    } else {
                        URL = SettingApi.templateAdd
                    }
                    $this.btnloading = true
                    URL(postJson, true)
                        .then(result => {
                            const { code, msg } = result
                            if (code === 1) {
                                ElMessage.success(msg)
                                $this.levelCancle()
                                $this.loadTableData()
                            } else {
                                ElMessage.error(msg)
                            }
                            $this.btnloading = false
                        }).catch(error => {
                            $this.btnloading = false
                        })
                }
            })
            console.log('保存等级', this.levelForm)
        }
    },
    created() {
        this.loadTableData()
        // const $this = this
        // $this.$nextTick(() => {
        //     const ids = setTimeout(() => {
        //         const ue = UE.getEditor('editor-demo-template')
        //         if (ue && $this.disabled)
        //             ue.setDisabled(true)
        //         if (ue && $this.levelForm.templateText)
        //             ue.setContent($this.levelForm.templateText)
        //         clearTimeout(ids)
        //     }, 1500)
        // })
    },
    mounted() {

    },
}
</script>
<style scoped></style>